@use "@/common/styles/colors"

.script-executor
  display: flex
  flex-direction: column
  background-color: colors.$dark-gray
  border: 1px solid colors.$gray
  padding: 1rem 1.3rem
  border-radius: 1rem
  gap: 2rem

  p
    font-size: 1.1rem
    font-weight: 500

  .script-progress
    display: flex
    flex-direction: column
    gap: 0.5rem

  .script-actions
    display: flex
    gap: 1rem
    width: 100%

    button
      width: 100%

  .script-header
    display: flex
    align-items: center
    gap: 1rem

    .script-img
      background-color: colors.$dark-gray
      border: 1px solid colors.$gray
      border-radius: 1rem
      display: flex
      padding: 0.5rem
      align-items: center
      justify-content: center
      width: 3rem
      height: 3rem

      img
        width: 90%

      svg
        width: 1.5rem
        height: 1.5rem
        color: colors.$primary

    .script-info
      h2
        margin: 0

      p
        margin: 0
        font-weight: 600
        color: colors.$subtext

  .input-area
    background-color: colors.$light-gray
    border: 1px solid colors.$primary
    border-radius: 0.5rem
    padding: 1rem
    margin: 1rem 0

    h3
      margin: 0 0 1rem 0
      color: colors.$primary

    .input-field
      display: flex
      gap: 0.5rem
      align-items: center

    .select-options
      display: flex
      flex-wrap: wrap
      gap: 0.5rem

      button
        flex: none
        min-width: auto
